<template>
<div class="container">
  <template v-if="riskInfo.compareTag==true">
    <h1>{{riskInfo.productName}}产品风险警示及投资者确认书</h1>
    <div class="content">
        <p>尊敬的投资者：您拟参与 ({{riskInfo.productName}}产品)，其风险等级为{{riskInfo.prodRiskLevel}}，高于您的风险承受能力等级 <span>{{riskInfo.clientRiskLevel}}</span>。参与该业务，可能导致您产生损失。</p>
        <p>我司就上述情况向您提出警示，并建议您关注业务的特征及风险，审慎作出投资决策。若您经审慎考虑后，仍坚持参与该业务，请签署下附投资确认书。</p>
        <p style="font-weight:bold">请您确认：</p>
        <p>本人/本机构已认真阅读了贵公司关于（{{riskInfo.productName}}产品）的相关提示，并已充分了解该业务的特征和风险，充分知悉上述不匹配情况。</p>
        <p>本人/本机构经审慎考虑后，仍坚持参与该业务，并愿意承担该项投资可能引起的损失和其他后果。参与该业务的决定，系本人/</p>
        <p>本机构独立、自主、真实的意思表示，与方正证券及相关从业人员无关。</p>
    </div>
  </template>
  <template v-else>
    <h1>{{riskInfo.productName}}产品适当性匹配意见及投资者确认书</h1>
    <div class="content">
        <p>尊敬的投资者：您的风险承受能力等级为:<span>{{riskInfo.clientRiskLevel}}</span>，您拟参与（{{riskInfo.productName}}），其风险等级为{{riskInfo.prodRiskLevel}}。我司已经向您充分揭示了该业务的风险。您的风险承受能力等级与该业务风险等级相匹配。本适当性评估意见供您决策参考，并不代表本公司对上述业务的风险或收益作出实质性判断和保证。
        <p>我司就上述适当性评估结果与您进行确认，并建议您审慎考察该业务的特征及风险，进行充分风险评估，自行做出投资决定。</p>
        <p style="font-weight:bold">请您确认：</p>
        <p>本人/本机构已认真阅读了贵公司关于（{{riskInfo.productName}}）的风险揭示书，并已充分了解该业务的特征和风险。本人/本机构在此确认自身风险承受能力等级与该业务风险等级相匹配。</p>
        <p>本人/本机构参与该业务的决定，系本人/本机构独立、自主、真实的意思表示，与方正证券及相关从业人员无关。</p>
        </p>
    </div>
    
  </template>
 
  <div class="footer">
    <router-link :to="{path:'/ProductDetail',query:{productId:productId}}" class="no-agree">不同意</router-link>
    <!-- <a href="productDetail.html" class="no-agree">不同意</a> -->
    <router-link :to="{path:'/ProductDeal',query:{productId:productId}}" class="agree readed">同意</router-link>
  </div>
</div>
</template>

<script>
import Stores from '@/stores'
export default {
  name: 'RiskMatch',
  data () {
    return {
      riskInfo: {},
      productId: this.$route.query.productId
    }
  },
  methods: {
    getRiskStore(){
      this.riskInfo = Stores.state.riskInfo;
      // console.log(this.riskInfo)
    }
  },
  mounted: function(){
    this.getRiskStore();
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: calculateRem(20px) calculateRem(16px) calculateRem(58px);
  >h1{
    width: 100%;
    height: auto;
    line-height: calculateRem(30px);
    font-size: calculateRem(22px);
    color: black;
    margin: 0 0 calculateRem(10px);
  }
  .content{
    color: #333;
    font-size: calculateRem(17px);
    line-height: calculateRem(24px);
    p{
      margin: calculateRem(12px) 0;
      >span{
        color: #eb1f10;
      }

    }

  }
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calculateRem(58px);
    background-image: linear-gradient(0deg, #F5F8FA 0%, rgba(245,248,250,0.00) 100%);
    box-sizing: border-box;
    padding: 0 calculateRem(10px);
    >a{
      display: inline-block;
      height: calculateRem(48px);
      line-height: calculateRem(46px);
      box-sizing: border-box;
      font-size: calculateRem(20px);
      text-align: center;
      /*font-weight: bold;*/
    }
    .no-agree{
      width: 38%;
      color: #EB1F10;
      border: 1px solid #818B91;
      border-radius: 5px;
      background: white;
      float: left;
      &:active{
        background: #fafafa;
      }

    }
    .agree{
      width: 60%;
      background: #f2b7b3;
      color: white;
      border: 1px solid #f2b7b3;
      border-radius: 5px;
      float: right;
      &:active{
        background: #efa5a0;
      };
    }
    .readed{
      background: #EB1F10;
      &:active{
        background: #C51B0D;
      };
    }
  }

}
</style>
